<template>
	<view class="container">
		<scroll-view scroll-x class="menu-top">
			<view class="menu-cell">
				<view  :class="[item.id==fcurrentId?'menu-list active':'menu-list']" v-for="item in flist" :key="item.id" @click="tabF(item.id)">
					<image :src="item.src" class="menu-img"></image>
					<text class="menu-text">{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
	<view class="content">
		<scroll-view scroll-y class="left-aside">
		<view v-for="item in slist" :key="item.id" class="f-item b-b" :class="{active: item.id === scurrentId}" @click="tabS(item.id)">
			{{item.name}}
		</view>
		</scroll-view>
		<view class="right-aside">
			<view class="shaixuan">
				<view style="display: flex; align-items: center;flex-wrap: wrap;">
				   <view class="list-label" @click="tabT(0)">
					  <text :class="[0==tcurrentId? 'label-list lael-list-active':'label-list'] " >全部</text>
				   </view>
				  <view class="list-label" v-for="item in tlist" :key="item.id" v-if="tlist.length>0" @click="tabT(item.id)">
				   <text :class="[item.id==tcurrentId? 'label-list lael-list-active':'label-list'] ">{{item.name}}</text>
				  </view>
				</view>
			
				<view class="shaixuan-box" style='margin-top: 20upx;' >
					<view class="xiaoliang" @click="tabClick(0)" :class="{ current: filterIndex === 0 }">
						<text>默认</text>
					</view>
					<view class="xiaoliang" @click="tabClick(1)" :class="{ current: filterIndex === 1 }">
						<text>销量</text>
						<view class="p-box">
							<text :class="{ active: sortorder === 1 && filterIndex === 1 }" class="yticon icon-shang"></text>
							<text :class="{ active: sortorder === -1 && filterIndex === 1 }" class="yticon icon-shang xia"></text>
						</view>
					</view>
					<view class="xiaoliang" @click="tabClick(2)" :class="{ current: filterIndex === 2 }">
						<text>价格</text>
						<view class="p-box">
							<text :class="{ active: sortorder === 1 && filterIndex === 2 }" class="yticon icon-shang"></text>
							<text :class="{ active: sortorder === -1 && filterIndex === 2 }" class="yticon icon-shang xia"></text>
						</view>
					</view>
				</view>
		</view>
			
		<scroll-view scroll-with-animation scroll-y class="right-prodcut"  lower-threshold="40" @scrolltolower="getmore">
			<view class="s-list" v-for="(item,index) in goodsList" :key="index"  >
				<view class="product-box" @click="navToGoodsDetail(item)">
					<image  :src="item.image" class="productImg"></image>
				</view>
				<view class="product-xinxi">
					<view class="product-title" @click="navToGoodsDetail(item)" >{{item.name}}</view>
					<view class="product-price">
						<text class="price-text">￥{{item.sale_price}}</text>
						<!-- <text style="font-size: 5upx;">已售 {{ item.sales }}</text> -->
						<image src="/static/gouwuche.png" class="gwc-btn" @click="addcart($event,item)"></image>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>	
	</view>
	<transition appear
	            @after-appear='afterEnter'
	            @before-appear="beforeEnter"
	            v-for="(item,index) in showMoveDot"
	            :key="index.id">
	  <div class="move_dot"
	       ref="ball"
	       v-if="item">
	    <!-- 小球图片 -->
	    <img :src="dropImage"
	         alt="">
	  </div>
	</transition>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import { mapState,mapMutations} from 'vuex';
	import {isEmptyObj,inWechat} from '../../utils/index.js';
	export default {
		comments:{
			uniLoadMore
		},
		data() {
			return {
				loadingType: 'more', //加载更多状态
				sizeCalcState: false,
				tabScrollTop: 0,
				fcurrentId:0,    //顶级类选中
				scurrentId: 0,   //左侧选中
				tcurrentId: 0,
				flist: [],
				slist: [],
				tlist: [],
				alllist:[],    //所有分类
				page: 1,
				goodsList: [],
				cateId:0,       //用于查询的cateId
				
				//排序
				filterIndex: 0,
				sortorder: -1,     // 1:升序 -1:倒叙
				showMoveDot: [], //控制下落的小圆点显示隐藏 
				elLeft: 0, //当前点击购物车按钮在网页中的绝对top值
				elTop: 0, //当前点击购物车按钮在网页中的绝对left值
				dropImage: '' ,// 小球图片
			}
		},
		computed: {
			...mapState('user', ['token']),
			...mapState('category', ['categorys']),
			...mapState('cart', ['mycart']),
		},
		onLoad(){
			this.alllist.length=0;
			this.loadData();
		},
		onShow() {
			//设置角标
			// this.$api.setCartBadge(this.mycart.length);
		},
		methods: {
			...mapMutations('category',['setCategorys']),
			...mapMutations('cart',['setCart','clearCart']),
			handleCate(){
				let list= this.categorys;
				list.forEach(item=>{
					if(item.level==1){
						this.flist.push(item);
					}
					this.alllist.push(item);
					
				});
				this.fcurrentId   = this.flist[0].id;
				this.handleScate();
			},
			handleScate(){  //重置二级分类
				this.slist.length=0;
				this.alllist.forEach(item=>{
					if(this.fcurrentId==item.pid){
						this.slist.push(item);
					}
				})
				if(this.slist.length>0){
					this.scurrentId = this.slist[0].id;
				}
				this.cateId = this.scurrentId;
				this.loadGoods('refresh');  //重置商品
				this.handleTcate();  
			},
			handleTcate(){  //重置三级分类 不需要处理商品
				this.tlist.length=0;
				this.alllist.forEach(item=>{
					if(this.scurrentId==item.pid){
						this.tlist.push(item);
					}
				})
				
			},
			loadData(){
				this.$ajax.get('category/all',{}).then(data=>{
					if(0==data.error){
						this.setCategorys(data.data);
						this.handleCate();
					}
				})
			},
			//一级分类点击
			tabF(id){
				if(this.fcurrentId==id) return;
				this.fcurrentId = id;
				this.handleScate();
			},
			//二级分类点击
			tabS(id){
				if(this.scurrentId==id) return;
				this.scurrentId = id;
				this.cateId = this.scurrentId;
				this.handleTcate();
				this.loadGoods('refresh');  //重置商品
			},
			tabT(id){
				if(this.tcurrentId==id) return;
				this.tcurrentId = id;
				if(id==0){
					this.cateId = this.scurrentId;
				}else{
					this.cateId = this.tcurrentId;
				}
				this.loadGoods('refresh');
			},
		
			loadGoods(type){
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more';
				}
				var param={
					page:this.page,
					category_id:this.cateId,
				}
				if (1===this.filterIndex) {
					if(1 ===this.sortorder){
						param.sort='sale_top'
					}else{
						param.sort='sale_low'
					}
				}
				if (2===this.filterIndex) {
					if(1 ===this.sortorder){
						param.sort='price_top'
					}else{
						param.sort='price_low'
					}
				}
				this.$ajax.get('goods/getbycategory',param).then(data=>{
					let num = data.data.length;
					if (type === 'refresh') {
						this.goodsList = data.data;
					}else{
						this.goodsList = this.goodsList.concat(data.data);
					}
					this.loadingType = num < 6 ? 'nomore' : 'more';
					if(type === 'refresh'){
						this.triggered = false;
					}
					uni.stopPullDownRefresh()
				})
			},
			//右侧栏滚动
			getmore(){
				this.triggered = false;
				if(this.loadingType =='more'){
					this.page +=1;
					setTimeout(() => {
						this.loadGoods('add')
					},500)
				}
			},
			tabClick(filterIndex){
				if(this.filterIndex==filterIndex){
					if(this.filterIndex==0) return;
					else{
						this.sortorder =  0-this.sortorder;
					}
				}else{
					this.filterIndex = filterIndex;
					this.sortorder =-1;
				}
				this.loadGoods('refresh');
			},
			navToGoodsDetail(item) {
				return uni.navigateTo({
					url: `/pages/product/product?data=${JSON.stringify({
						goods: item
					})}`
				});
			},
			addcart(e,item){
				//this.clearCart();
				let cartgoods = {
					'goods'   :item,
					'sku'     :{id:0,'spec':'',quantity:item.quantity,sale_price:item.sale_price},
					'sku_id'  :0,
					'quantity': 1,
					'goods_id':item.id,
					'price'   :item.sale_price
				}
				let cartList = this.mycart;
				if(isEmptyObj(cartList)){
					cartList.push(cartgoods);
				}else{
					var updated=0;  //修改数量标记
					for(let i=0,l=cartList.length;i<l;i++){
						if(cartList[i].goods_id==item.id && cartList[i].sku_id== sku_id){
							cartList[i].quantity=cartList[i].quantity + 1;
							updated=1; //新增
							break;
						}
					}
					if(updated==0){ //修改数量
						cartList.push(cartgoods);
					}
				}
				this.setCart(cartList);
				// this.$api.setCartBadge(cartList.length);
				this.$toast('加入成功');
			},

		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: fixed;
		//#ifdef H5 
		top: 280rpx;
		//#endif
		//#ifdef APP-PLUS  || MP-WEIXIN
		 top: 200rpx;
		//#endif
	}

	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 80%;
		background-color: #f8f8f8;
	}
	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: $font-normal;
		color: $font-color-base;
		position: relative;
		&.active{
			font-weight: 700;
			font-size: $font-normal;
			color: #000000;
			background: #fff;
			&:before{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: #6284ce;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside{
		flex: 1;
		overflow: hidden;
		height: 100%;
		padding-left: 20upx;
		background-color: #fff;
	}
	.s-item{
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}
	.t-list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;
		&:after{
			content: '';
			flex: 99;
			height: 0;
		}
	}
	.t-item{
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;
		
		image{
			width: 140upx;
			height: 140upx;
		}
	}
	.menu-top{
		padding: 30rpx 15rpx;
		display: flex;
		
	}
	.menu-cell{
		display: flex;
		white-space : normal ;
	}
	.menu-list{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0 30rpx;
		.menu-img{
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
		}
		.menu-text{
			font-size: 22rpx;
			margin-top: 10rpx;
			white-space:nowrap;
		    overflow:hidden;
		    text-overflow:clip;
		}
	}
	.menu-cell .active{
		.menu-img{
			border: 1px solid $base-color;
		}
		.menu-text{
			color: $base-color;
		}
	}
	.shaixuan{
		border-bottom: 1px solid #ededed;
	}

	.list-label{
		padding: 10rpx 0 0 0;
		.label-list{
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
			border-radius: 60rpx;
			background-color: #f4f4f4;
			color: #2e2e2e;
			margin-right: 15rpx;
			font-size: 24rpx;
			display: inline-block;
			margin-bottom: 15rpx;
		}
		.lael-list-active{
			background-color: #dfe8f9;
			color: #6284ce;
		}
	}
	.s-list{
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		.product-box{
			width: 150rpx;
			height: 160rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			.productImg{
				width: 120rpx;
				height: 120rpx;
				border-radius: 100rpx;
			}
		}
		.product-xinxi{
			position: relative;
			flex: 1;
			margin-left: 10rpx;
			margin-right: 30rpx;
			border-bottom: 1px solid #ededed;
			.product-title{
				font-size: 30rpx;
				//font-weight: 700;
				margin-top: 10rpx;
			}
			.product-price{
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: absolute;
				width: 100%;
				bottom: 20rpx;
				.price-text{
					font-weight: 700;
					color: $font-color-price;
				}
				.gwc-btn{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
	
	.yticon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30upx;
		height: 14upx;
		line-height: 1;
		margin-left: 4upx;
		font-size: $font-lg;
		color: #888;
		&.active {
			color: $base-color;
		}
	}
	
	.xia {
		transform: scaleY(-1);
	}
	.shaixuan-box{
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
		.xiaoliang{
			font-size: $font-lg;
			display: flex;
			align-items: center;
			margin-right: 30rpx;
			.sortIcon{
				display: flex;
				flex-direction: column;
				margin-left: 10rpx;
				.shang{
					width:0;
					height:0;
					border-right:10rpx solid transparent;
					border-left:10rpx solid transparent;
					border-bottom:10rpx solid #bababa;
				}
				.xia{
					 transform: rotate(180deg);
					 margin-top: 10rpx;
				}
			};
			&.current {
				color: $base-color;
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid $base-color;
				}
			}
			
		}
	}
	
	.right-prodcut{
		height: calc(100% - 210px);
	}
</style>
